<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/normalize.css">
  <style>
    .container {
      margin: auto;
      margin-top: 70px;
      text-align: center;
      width: 300px;
    }
    .sub-title {
      color: gray;
      font-size: 14px;
    }
    .title {
      font-size: 45px;
    }
    .form {
      width: 300px;
    }
    .form-item {
      margin-bottom: 25px;
      text-align: left;
    }
    .form-item-label {
      font-size: 14px;
    }
    .symbol {
      padding-left: 5px;
      color: red;
    }
    .input {
      margin-top: 10px;
      width: 90%;
      border-radius: 6px;
      height: 25px;
      border-color: silver;
      border-style: solid;
      background-color: cornsilk;
    }
    .desc {
      margin-top: 5px;
      font-size: 12px;
      color: gray;
    }
    .prefer-setting {
      text-align: left;
    }
    .prefer-setting-title {
      font-size: 9px;
      color: black;
    }
    .prefer-setting-checkbox {
      vertical-align: middle;
    }
    .prefer-setting-label {
      font-size: 12px;
      margin-left: 5px;
    }
    .btn {
      width: 100%;
      border-radius: 10px;
      height: 40px;
      margin-top: 30px;
      background-color: deepskyblue;
      border-color: blue;
      color: white;
    }
  </style>
</head>
<body>
  <div id="application" v-cloak>
    <div class="container">
      <p class="sub-title">加入我们，一起创造美好世界</p>
      <h1 class="title">创建你的账号</h1>
      <div class="form">
        <div class="form-item" v-for="(item, index) in formData" :key="item.label">
          <div class="form-item-label">
            <span>{{item.label}}</span>
            <span class="symbol">*</span>
          </div>
          <input :type="item.type" :placeholder="item.placeholder" class="input" v-model="item.value">
          <p v-if="item.desc" class="desc">{{item.desc}}</p>
        </div>
        <div class="prefer-setting">
          <p class="prefer-setting-title">偏好设置</p>
          <input type="checkbox" v-model="preferSettingStatus" class="prefer-setting-checkbox">
          <span class="prefer-setting-label">接收更新邮件</span>
        </div>
        <button class="btn" @click="handleCreateAccount">创建账号</button>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const App = {
      data() {
        return {
          formData: [
            {
              label: '用户名',
              value: '',
              required: true,
              placeholder: '',
              type: 'text',
            },
            {
              label: '邮箱地址',
              value: '',
              required: false,
              placeholder: '',
              type: 'text',
            },
            {
              label: '密码',
              value: '',
              required: false,
              placeholder: '',
              type: 'password',
              desc: '请确认密码程度需要大于6位'
            }
          ],
          preferSettingStatus: false
        }
      },
      methods: {
        handleCreateAccount() {
          if (!this.formData[0].value) {
            alert("请输入用户名")
            return
          }
        }
      }
    }
    Vue.createApp(App).mount('#application')
  </script>
</body>
</html>